<template>
  <el-card
    ref="ref-main"
    :body-style="{padding: '10px'}"
    shadow="hover"
  >
    <el-container>
      <el-container>
        <component
          :is="item.tag"
          v-for="(item, index) in leftItems"
          :key="buildDOMKey(item, index)"
          :ref="`ref-left-${index}`"
          :c-m="item"
          @input="handleInput($event)"
        />
        <slot name="left" />
      </el-container>
      <component
        :is="item.tag"
        v-for="(item, index) in rightItems"
        :key="buildDOMKey(item, index)"
        :ref="`ref-right-${index}`"
        :c-m="item"
        @input="handleInput($event)"
      />
      <slot name="right" />
    </el-container>
  </el-card>
</template>

<script lang="ts">
/*
prop 列表
  leftItems: ComponentModel[]   左边对齐项集
  rightItems: ComponentModel[]  右边对齐项集
slot 列表
  left  左边对齐插槽
  right 右边对齐插槽
ref 列表
  ref-main [默认]
  ref-left-${index}
  ref-right-${index}

注意：
  01. 原则上来说，TgControlBar 应该只放置按钮类组件
  02. 要使用复杂的组件也应考虑使用 Dialog、Popover 等弹出式组件隐藏复杂内容，以保证 TgControlBar 的简洁性
  03. 无法通过 ComponentModel 定义的组件可以考虑使用 left、right 插槽，或者对组件进行再封装
*/
import { Component, Prop } from 'vue-property-decorator'
import TgComponent from '../TgComponent'
import { ComponentModel } from '@TG/interface'
import TgButtonStatus from '../TgButton/TgButtonStatus.vue'
import ElButtonPackage from '../ElPackage/ElButtonPackage.vue'
import ElDropdownPackage from '../ElPackage/ElDropdownPackage.vue'

@Component({
  name: 'TgControlBar',
  components: {
    TgButtonStatus,
    ElButtonPackage,
    ElDropdownPackage
  }
})
export default class extends TgComponent {
  @Prop({ type: Array, default: () => [] }) private leftItems!: ComponentModel[]
  @Prop({ type: Array, default: () => [] }) private rightItems!: ComponentModel[]

  private handleInput(value: any) {
    this.$emit('input', value)
  }

  public defaultRef() {
    return 'el-main'
  }
}
</script>
